import React, { FC } from 'react'
import type { PropsType } from '../../components/QuestionCard'
import QeustionCard from '../../components/QuestionCard'
import ListSearch from '../../components/ListSearch'
import styles from './common.module.scss'
import { useTitle } from 'ahooks'
import { Typography, Empty, Spin } from 'antd'
import useLoadQuestionList from '../../hooks/useLoadQuestionList'
import ListPage from '../../components/ListPage'

const { Title } = Typography

const Star: FC = () => {
  useTitle('标星问卷')

  const { data = {}, loading } = useLoadQuestionList({isStar: true})
  const { list = [], total = 0 } = data
  
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>标星问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.centent}>
        {
          !loading && list.length === 0 && <Empty description="暂无数据" />
        }
        <div style={{'textAlign': 'center'}}>
          {loading && <Spin style={{margin: '20px'}} />}
        </div>
        {!loading && list.length > 0 && list.map((item: PropsType) => {
          const { _id } = item
          return <QeustionCard key={_id} {...item} />
        })}
      </div>
      <div className={styles.footer}>
        <ListPage total={total} defaultCurrent={1} />
      </div>
    </>
  )
}

export default Star